<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>主页</title>
  <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
  <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
  <link href="${pageContext.request.contextPath}/css/news.css" type="text/css" rel="stylesheet">
  <style type="text/css">
      *{
          margin: 0px;
          padding: 0px;
      }
  </style>
</head>
<body >
<script type="text/javascript">
    <%--let begin = 0 ;--%>
    <%--function discuss( id ){--%>
    <%--    // 此时的id ，就是 内容的id--%>
    <%--    $.post("${pageContext.request.contextPath}/content/detail" , {contentId:id} );--%>
    <%--    window.location = "${pageContext.request.contextPath}/content/detail?id=" + id ;--%>
    <%--}--%>

    $(function(){
        // 获取用户信息
        $.post("${pageContext.request.contextPath}/user/Info" , function(responseData) {
              if( responseData.status == -1 ){
                  //$("#username").css("display" , "none") ;
                //$("#username").text(null) ;
                  //$("#zhuce").css("display" , "block") ;
                  //$("#login").css("display" , "block") ;
                  $("#register").css("display" , "none") ;
                //$("#register").text(null) ;
              }else if(responseData.status == 0){
                  $("#login").css("display" , "none") ;
                  $("#zhuce").css("display" , "none") ;
                //$("#login").text(null) ;
                //$("#zhuce").text(null) ;
                  //$("#register").css("display" , "block") ;
                  $("#username").text(responseData.data.username) ;
                  <%--$("#publish_content").click(function(){--%>
                  <%--    window.location = "${pageContext.request.contextPath}/publish_content.jsp"--%>
                  <%--})--%>
              }
          } , "JSON") ;

          $.post("${pageContext.request.contextPath}/news/list" ,{findtext:0,issort:1} ,  function (responseData){
              if( responseData.status == 0 ){
                  // 此时证明是成功的
                console.log(responseData.data);
                  let datas = responseData.data ;  // 此时是数组
          		let pagesize=10;
          		let pagenum=Math.ceil(datas.length/pagesize);
                  for( let i = 0 ; i < datas.length ; i++ ) {
                      let xxx = datas[i] ;
                      // 创建一个div ，向 div 中填充内容
                      let e = $("<div style=\"margin-bottom: 10px;box-shadow: 0px 1px 3px #2d2c2c ;\" onclick='discuss("+xxx.title+")'>\n" +
                          "                <div >\n" +
                          "                    <div style=\"text-align: left ; padding-left: 10px; padding-top: 10px\">" + xxx.username + "</div>\n" +
                          "                    <div style=\"text-align: center\">" + xxx.subtitle + "</div>\n" +
                          "                </div>\n" +
                          "                <div style=\"text-align: right ; padding-bottom: 10px ; padding-right: 10px;\">\n" +
                          "                   " + xxx.date  + " <i class='fa fa-thumbs-up'></i>&nbsp;" + xxx.zan +"\n" +
                          "                </div>\n" +
                          "            </div>");

                      // 追加一个元素
                      $("#contentList").append( e ) ;
                  }
              }
         } , "JSON") ;
    })

</script>
<div style="z-index: 99;width:100%;height: 105px;position: fixed;overflow:hidden;margin:0;background-color: #ffffff">
<div class="head row" style="height: 50px ; line-height: 50px ;font-size: 20px;
top: 10px ;box-shadow: 0px 1px 3px #dedede ; width: 100%;display: flex; padding: 5px;position: fixed;
"><div class="col-md-2"></div>
<div class=" col-md-1" ><a href="homepage.jsp" ><i class="fa fa-home fa-fw" aria-hidden="true"></i>首页</a> </div>
<div class="search bar7 col-md-3" style="font-size: 14px">
  <form action="search.jsp">
	<input type="text" placeholder="搜索" name="crid">
	<button type="submit" ><i class="fa fa-search" style=";margin-right: 8px;margin-top: 15px;position: relative"></i> </button>
  </form>
</div>
<div class="col-md-1"></div>
<div class="col-md-3" style="font-size: 20px">
  <a href="login.jsp" id="login" style="margin-right: 10px"><i class="fa fa-sign-in"></i>登录</a>
  <a href="zhuce.jsp" id="zhuce"><i class="fa fa-registered"></i>注册</a>
  <a href="#" id="username" style="display: inline"></a>
  <a href="#" id="register"4 class="btn btn-danger"><i class="fa fa-sign-out"></i>注销</a>
</div>
<div class="col-md-1"><a href="publish.jsp" style="" class=""><i class="fa fa-pencil fa-fw"></i>发布</a></div>
<div class="col-md-1"></div>
</div>
<div class="row top" style="height: 30px ; line-height: 30px ;font-size: 15px;
top: 75px ;box-shadow: 0px 1px 1px #dedede ; width: 100% ;position: fixed;">
<div class="col-md-3 " style="text-align: center ;" ></div>
<div class="col-md-1 " style="text-align: center;" ><span style="cursor: hand;" class="active">热门 </span></div>
<div class="col-md-1 " style="text-align: center ;"><span style="cursor: hand;">军事 </span> </div>
<div class="col-md-1 " style="text-align: center ;"><span style="cursor: hand;">科技 </span> </div>
<div class="col-md-1 " style="text-align: center ;"><span style="cursor: hand;">时政 </span> </div>
<div class="col-md-1 " style="text-align: center ;"><span style="cursor: hand;">娱乐</span></div>
<div class="col-md-1" style="text-align: center ;"><span style="cursor: hand;">生活 </span></div>
<div class="col-md-3 btn " style="text-align: center;"></div>
</div>
</div>
<div style="height: 50px"></div>
<div class="row" style="margin-top: 5% ; width: 100%;z-index:-1">
<div class="col-md-3 " style="text-align: right; font-weight: bolder">
</div>
<div class="col-md-6 " id="contentList" style="background-color: white">

</div>
<div class="col-md-3 ">

</div>

</div>
<script>
var oLis=document.getElementsByTagName("span");
var i,j;
var length=oLis.length;
for(i=0;i<length;i++){
	oLis[i].onclick=function(){
		for(j=0;j<length;j++){
			oLis[j].className="";
		}
		this.className+="active";
	}
}

</script>
</body>
</html>
